<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单：采集用户信息，并提交到服务器 
		      input控件元素：采集用户信息
			  必须type属性  属性值  text  文本框
			                       password  密文 文本框
								   submit提交
								   button    按钮 结合js value
								   reset     重置
								   color    颜色控件
								   datetime-local 本地日历控件
								   date   日期
								   time   时间
								   week   周
								   range   滑块
								   file   上传文件
								   radio  单选框 结合name选项
								   checkbox   复选框
								   checked 默认选择【单复选框】
								   image     图片按钮结合src使用
								   hidden    隐藏 结合 js
		-->
		<h1>登陆页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text"/> <br><br>
		<input>
		密码：<input type="password"/><br><br>
		<input type="submit" />
		<input type="button" value="自定义按钮"/>
		<!-- html5写法 结合js-->
		<button>触发按钮</button>
		<input type="reset" /> <br><br>
		<input type="color" />
		<input type="datetime-local" />
		<input type="date">
		<input type="time">
		<input type="week">
		<input type="range /">
		<input type="file" />
		男<input type="radio" name="sex" checked/>
		女<input type="radio" name="sex"/>
		<input type="checkbox"/>红烧肉
		<input type="checkbox" checked/>佛跳墙
		<input type="checkbox"/>小鸡炖蘑菇
		<input type="image" src="img/1.png"/>
		<input type="hidden"/>
		<h4>表单元素：多行文本元素   cols行属性  rows列属性</h4>
		建议：<textarea cols="20" rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据</h4>
		<!-- 层级元素  快捷键：select>option -->
		<select name="" id="">
			<option>00:00--24:00</option>
			<option>00:00--06:00</option>
			<option>06:00--12:00</option>
			<option>12:00--18:00</option>
			<option>18:00--24:00</option>
		</select>
			<h4>表单元素：细节元素</h4>
		<!-- 层级元素 快捷键：details>summary+div-->
		<details>
			<summary>征婚启示</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aperiam cumque, vitae vel atque velit, dolor, sit harum ea perspiciatis quod sapiente consectetur maiores optio! Maxime vero harum molestiae ipsa. </div>
		</details>
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假啦</mark>
		<!-- 度量元素 必须属性 value="0~1默认值"min属性  max属性 -->
		电量：<meter value="80" min="0"  max="100"></meter>
	</body>
</html>